<template>
      <el-container class="student-dashboard">
            <el-header>
                  <div class="header-content">
                        <h2>学生个人中心</h2>
                        <el-button type="primary" @click="editInfo">修改信息</el-button>
                  </div>
            </el-header>

            <el-main>
                  <el-row :gutter="20">
                        <el-col :span="8">
                              <el-card>
                                    <template #header>
                                          <span>我的信息</span>
                                    </template>
                                    <p>姓名：{{ student.username }}</p>
                                    <p>学号：{{ student.indetifier }}</p>
                                    <p>学校：{{ student.school }}</p>
                                    <p>联系方式：{{ student.tel }}</p>
                                    <p>邮箱：{{ student.email }}</p>
                              </el-card>
                        </el-col>

                        <el-col :span="16">
                              <el-tabs v-model="activeTab">
                                    <el-tab-pane label="我的岗位申请" name="jobs">
                                          <div v-loading="isLoading">
                                                <el-table v-if="jobApplications && jobApplications.length > 0"
                                                      :data="jobApplications" style="width: 100%">
                                                      <el-table-column prop="title" label="岗位名称" />
                                                      <el-table-column prop="publishTime" label="发布日期"
                                                            :formatter="formatDate" />
                                                      <el-table-column prop="status" label="状态" />
                                                </el-table>
                                                <el-empty v-else description="暂无申请记录" />
                                          </div>
                                    </el-tab-pane>



                                    <el-tab-pane label="我的工资记录" name="salary">
                                          <el-table :data="salaryRecords" style="width: 100%">
                                                <el-table-column prop="month" label="月份" />
                                                <el-table-column prop="job" label="岗位" />
                                                <el-table-column prop="amount" label="工资（元）" />
                                          </el-table>
                                    </el-tab-pane>
                              </el-tabs>
                        </el-col>
                  </el-row>
            </el-main>
            <el-dialog v-model="dialogVisible" title="修改个人信息" width="500px">
                  <el-form :model="editForm" label-width="100px">
                        <el-form-item label="姓名">
                              <el-input v-model="editForm.username" />
                        </el-form-item>
                        <el-form-item label="学校">
                              <el-input v-model="editForm.school" />
                        </el-form-item>
                        <el-form-item label="联系方式">
                              <el-input v-model="editForm.tel" />
                        </el-form-item>
                        <el-form-item label="邮箱">
                              <el-input v-model="editForm.email" />
                        </el-form-item>
                        <el-form-item label="密码">
                              <el-input v-model="editForm.password" />
                        </el-form-item>
                  </el-form>
                  <template #footer>
                        <span class="dialog-footer">
                              <el-button @click="dialogVisible = false">取消</el-button>
                              <el-button type="primary" @click="submitEdit">保存</el-button>
                        </span>
                  </template>
            </el-dialog>

      </el-container>
</template>

<script setup lang="ts">
import useOwnPerson from '@/hooks/student/useOwnPerson';
import timeFormat from "@/tool/format/timeFormat";


const {
      student,
      jobApplications,
      salaryRecords,
      activeTab,
      editForm,
      dialogVisible,
      submitEdit,
      editInfo,
      isLoading
} = useOwnPerson()



function formatDate(row: any, column: any, cellValue: any) {
      if (!cellValue) return '';
      const date = new Date(cellValue);
      return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
}
function pad(n: number): string {
      return n < 10 ? '0' + n : n.toString();
}
</script>

<style scoped>
.student-dashboard {
      padding: 20px;
}

.header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
}

.el-card {
      margin-bottom: 20px;
}
</style>
